<!-- html -->
<template>
  <h2 class="h2">接口与泛型</h2>
  <span class="span3">Person</span>
  <br>
  <span class="span2">id：{{ person.id }}，name：{{ person.name }}，age：{{ person.age }}，address：{{ person.address }}</span>
  <br>
  <span class="span3">{{ persons1Title }}</span>
  <li class="li1" v-for="item in persons1" :key="item.id">id：{{ item.id }}，name：{{ item.name }}，age：{{ item.age }}</li>
  <br>
  <span class="span3">persons2:Person[]</span>
  <li class="li1" v-for="item in persons2" :key="item.id">id：{{ item.id }}，name：{{ item.name }}，age：{{ item.age }}</li>
  <br>
  <span class="span3">persons3:Persons1</span>
  <li class="li1" v-for="item in persons3" :key="item.id">id：{{ item.id }}，name：{{ item.name }}，age：{{ item.age }}</li>
  <br>
  <span class="span3">persons4:Persons2</span>
  <li class="li1" v-for="item in persons4" :key="item.id">id：{{ item.id }}，name：{{ item.name }}，age：{{ item.age }}</li>
  <br>
  <span class="span3">{{ persons5Title }}</span>
  <li class="li1" v-for="item in persons5" :key="item.id">id：{{ item.id }}，name：{{ item.name }}，age：{{ item.age }}</li>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'interfaceTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref } from 'vue'
import { Person, Persons1, Persons2 } from '@/interface/Person.ts'
//数据
let persons1Title = 'Array<Person>'
let persons5Title = 'ref<Persons2>'
let person: Person = { id: '1', name: '张三', age: 18, address: '苹果路橘子区梨子家园' }
let persons1: Array<Person> = [{ id: '1', name: '张三', age: 18, address: '苹果路橘子区梨子家园' }, { id: '2', name: '李四', age: 19 }, { id: '3', name: '王五', age: 20 }]
let persons2: Person[] = [{ id: '1', name: '张三', age: 18, address: '苹果路橘子区梨子家园' }, { id: '2', name: '李四', age: 19 }, { id: '3', name: '王五', age: 20 }]
let persons3: Persons1 = [{ id: '1', name: '张三', age: 18, address: '苹果路橘子区梨子家园' }, { id: '2', name: '李四', age: 19 }, { id: '3', name: '王五', age: 20 }]
let persons4: Persons2 = [{ id: '1', name: '张三', age: 18, address: '苹果路橘子区梨子家园' }, { id: '2', name: '李四', age: 19 }, { id: '3', name: '王五', age: 20 }]
let persons5 = ref<Persons2>([{ id: '1', name: '张三', age: 18, address: '苹果路橘子区梨子家园' }, { id: '2', name: '李四', age: 19 }, { id: '3', name: '王五', age: 20 }])
</script>

<!-- 样式 -->
<style scoped></style>@/assets/interface/Person